<template>
    <div class="app-container">
        <el-row style="margin-bottom:20px;">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="90px">
                    <el-form-item label="用户ID" >
                        <el-input v-model="queryParams.userId" placeholder="请输入用户ID"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-autocomplete v-model="queryParams.cellphone" placeholder="请输入手机号"
                        :fetch-suggestions="querySearchAsync"
                         @select="handleSelect"></el-autocomplete>
                    </el-form-item>
                    <el-form-item label="名称" >
                        <el-input v-model="queryParams.name" placeholder="请输入名称"></el-input>
                    </el-form-item>
                    <el-form-item label="类目" >
                        <el-select v-model="queryParams.acctc">
                            <el-option label="零钱" value="pinmoney"></el-option>
                            <el-option label="推荐收益" value="referralProfit"></el-option>
                            <el-option label="团队收益" value="teamProfit"></el-option>
                            <el-option label="网体收益" value="fttProfit"></el-option>
                        </el-select>
                    </el-form-item>
                    
                    <el-form-item label="关联类型" >
                        <el-select v-model="queryParams.relType">
                            <el-option label="提现" value="Withdraw"></el-option>
                            <el-option label="订单" value="Order"></el-option>
                            <el-option label="分红" value="FttProfit"></el-option>
                            <el-option label="周分红" value="FttWeekProfit"></el-option>
                            <el-option label="转帐" value="Transfer"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="帐期月份" >
                        <el-date-picker format='yyyyMM' @change="periodMonthFormat" v-model="periodMonth" :clearable='false'  placeholder="请输入帐期月份"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="帐期日期" >
                        <el-date-picker format='yyyyMMdd' @change="dateFromFormat" v-model="periodDayFrom" :clearable='false' placeholder="帐期开始日期"></el-date-picker>至
                        <el-date-picker format='yyyyMMdd' @change="dateToFormat" v-model="periodDayTo" :clearable='false' placeholder="帐期结束日期"></el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click='handleQuery(queryParams)' size="mini" >搜索</el-button>
                        <el-button icon="el-icon-refresh" @click='resetQuery()' size="mini">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
        
        <Table :list='list' :loading='loading' :tableColumns='tableColumns' ></Table>

        <pagination  v-show="total>0"  :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getAccountitemsHander"  />
        
    </div>
</template>
<script>
import myForm from '@/views/components/myForm'
import Table from '@/views/components/myTable'
import { getAccountitems, userListAPI,accountitemsExport} from '@/api/ka/ka'
export default {
    components:{
        myForm,
        Table
    },
    data() {
        return{
            loading:false,
            exportLoading:false,
            periodMonth:'',
            periodDayFrom:'',
            periodDayTo:'',
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            tableColumns:[
                {label:'ID',param:'id'},
                {label:'用户ID',param:'userId'},
                {label:'手机号',param:'cellphone'},
                {label:'角色',param:'roleLevel',
                    render:row=>{
                        if(row.roleLevel == '2-1742'){
                            return '经销商'
                        }else if(row.roleLevel == '2-1741'){
                            return '经理'
                        }else if(row.roleLevel == '2-0'){
                            return '会员'
                        }else {
                            return row.roleLevel
                        }
                    }
                },
                {label:'网体',param:'fttLevel'},
                {label:'姓名',param:'idname'},
                {label:'名称',param:'name'},
                {label:'类目',param:'acctc',
                    render:row=>{
                        if(row.acctc == 'pinmoney'){
                            return '零钱'
                        }else if(row.acctc == 'referralProfit'){
                            return '推荐收益'
                        }else if(row.acctc == 'teamProfit'){
                            return '团队收益'
                        }else if(row.acctc == 'fttProfit'){
                            return '网体收益'
                        }else {
                            return row.acctc
                        }
                    }
                },
                {label:'交易额',param:'value',
                    render:row=>{
                        if(row.drcr == 'incr'){
                            return '+'+row.value
                        }else if(row.drcr == 'decr'){
                            return '-'+row.value
                        }else{
                            return row.value
                        }
                    }
                },
                {label:'交易后余额',param:'balance'},
                {label:'对方用户ID',param:'anotherUserId'},
                {label:'关联类型',param:'relType',
                    render:row=>{
                        if(row.relType=='Withdraw'){
                            return '提现'
                        }else if(row.relType=='Order'){
                            return '订单'
                        }else if(row.relType=='FttProfit'){
                            return '分红'
                        }else if(row.relType=='FttWeekProfit'){
                            return '周分红'
                        }else if(row.relType=='Transfer'){
                            return '转账'
                        }else{
                            return row.relType
                        }
                    }
                },
                {label:'账期月份',param:'periodMonth'},
                {label:'账期日期',param:'periodDay'},
               
                
              
                {label:'创建时间',param:'createdAt',
                    render: row => {
                        if(!row.createdAt){
                            return '-'
                        }
                        return row.createdAt.replace('T',' ').substring(0,16)
                    }
                },
                
            ],
            list:[],
            total:0,
            currSelect:0,
            num:{
                num2w:0,
                num3w:0,
                num3999:0,
                num4999:0,
                totalNum:0,
                totalBouns:0,
            }
        }
    },
    created(){
        
        this.getAccountitemsHander()
    },
    methods:{
        dateHandler(val){
            let d = new Date(val)
            let year = d.getFullYear()+''
            let month = d.getMonth()+1 >= 10 ? ''+ (d.getMonth()+1) : '0' + (d.getMonth()+1) 
            let date = d.getDate() >= 10 ? ''+d.getDate() : '0'+d.getDate()
            return {year,month,date}
        },
        periodMonthFormat(val){
            this.queryParams.periodMonth = this.dateHandler(val).year+this.dateHandler(val).month
        },
        dateFromFormat(val){
            this.queryParams.periodDayFrom = this.dateHandler(val).year+this.dateHandler(val).month+this.dateHandler(val).date
        },
        dateToFormat(val){
            this.queryParams.periodDayTo = this.dateHandler(val).year+this.dateHandler(val).month+this.dateHandler(val).date
        },
        //获取数据
        getAccountitemsHander(data){
            data = this.addDateRange(this.queryParams)
            getAccountitems(data).then(res=>{
                if(res.data.code == 200){
                    this.list = res.data.rows
                    this.total = res.data.total
                }
            })
        },
        //远程搜索
        handleSelect(val){
            this.queryParams.userId = val.userId
        },
        querySearchAsync(queryString,cb){
            clearTimeout(this.timeout)
            var restaurants = []
            this.timeout = setTimeout(()=>{
                let data = {
                    cellphone:queryString
                }
                userListAPI(data).then(res=>{
                    if(res.data.code == 200){
                        let results = res.data.rows
                        results.forEach(item=>{
                            restaurants.push({value:item.cellphone,userId:item.id})
                            cb(restaurants)
                        })
                    }
                })
            },1000*Math.random())
        },
        //搜索
        handleQuery(obj){
            console.log(this.periodMonth)
            if(this.periodMonth == null){
                this.queryParams.periodMonth = ''
            }
            if(this.periodDayFrom == null){
                this.queryParams.periodDayFrom = ''
            }
            if(this.periodDayTo == null){
                this.queryParams.periodDayTo = ''
            }
            this.searchDelVal(obj)
            this.queryParams.pageNo = 1;
            this.getAccountitemsHander()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.searchReset();
            this.handleQuery();
            
        },
        //清空搜索条件
        searchReset(){
            this.queryParams.pageNo = 1
            this.queryParams.pageSize = 10
            this.queryParams.userId = undefined
            this.queryParams.cellphone = undefined
            this.queryParams.name = undefined
            this.queryParams.relType = undefined
            this.queryParams.acctc = undefined
            this.queryParams.periodDayFrom = undefined
            this.queryParams.periodDayTo = undefined
            this.queryParams.periodMonth = undefined
            this.periodDayFrom = undefined
            this.periodDayTo = undefined
            this.periodMonth = undefined
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm("是否确认导出账户流水数据项?", "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.exportLoading = true;
                return accountitemsExport(queryParams);
            }).then(response => {
                this.download(response.msg);
                this.exportLoading = false;
            }).catch(() => {});
        },
        
    }
}
</script>
<style scoped>
.selectBtn {
    background:#1890ff;
    color:#fff;
}
</style>
